<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>详细统计</title>
  <link rel="stylesheet" href="css/bootstrap-table.min.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/dcalendar.picker.css">
  <link rel="stylesheet" href="css/paging.css">
  <link rel="stylesheet" href="css/paging.css">
  <link rel="stylesheet" href="css/cqs.style.css">
</head>
<body style="background-color: #f4f4f4;">
<div class="cqs-main">
  <div class="cqs-main_top cqs-mgt30">
    数据报表：<a class="cqs-clc40000" href="javascript:;">成本中心＞</a>采购排名

    <div class="date-box">
      <span class="date-group"><input id='mydatepicker' placeholder="2018年03月27日" type='text'/>
        <img src="img/btn_arrow_down_h.png" alt=""></span> —
      <span class="date-group"><input id='mydatepicker2' placeholder="2018年03月27日" type='text'/>
        <img src="img/btn_arrow_down_h.png" alt=""></span>
    </div>

    <div class="cqs-search-group"><span class="cqs-img-search"><img src="img/icon_search_grey.png" alt=""></span> <input type="text" placeholder="在当前条件下搜索商品名称"></div>

    <button class="cqs-output" style="float: right; margin-right: 20px;margin-top:19px;">导出报表</button>
  </div>
  <div class="cqs-main_con table-responsive cqs-box cqs-mgb50 cqs-bgfff"><!--table table-bordered -->
    <table class="table cqs-table" style="border-bottom:1px solid #dddddd;" >
      <tr>
        <th>序号</th>
        <th colspan="3">商品名称</th>
        <th data-field="" data-sortable="true">
          <span class="table-name">数量</span>
          <div class="arrow-box">
            <span class="arrow-up up-gray"></span>
            <span class="arrow-down down-gray"></span>
          </div>
        </th>
        <th data-sortable="true">
          <span class="table-name">单价(元)</span>
          <div class="arrow-box">
            <span class="arrow-up up-red"></span>
            <span class="arrow-down down-gray"></span>
          </div>
        </th>
        <th data-sortable="true">
          <span class="table-name">小计(元)</span>
          <div class="arrow-box">
            <span class="arrow-up up-gray"></span>
            <span class="arrow-down down-red"></span>
          </div>
        </th>
      </tr>
      <tr>
        <td>1</td>
        <td>金万年 白板擦 G-2800T 磁性白板擦 授课专用白板擦(1+2)套装</td>
        <td>颜色:黑色</td>
        <td>包装:12支/盒</td>
        <td>13</td>
        <td>1,000.00</td>
        <td>13,000.00</td>
      </tr>
      <tr>
        <td>1</td>
        <td>金万年 白板擦 G-2800T 磁性白板擦 授课专用白板擦(1+2)套装</td>
        <td>颜色:黑色</td>
        <td>包装:12支/盒</td>
        <td>13</td>
        <td>1,000.00</td>
        <td>13,000.00</td>
      </tr>
      <tr>
        <td>1</td>
        <td>金万年 白板擦 G-2800T 磁性白板擦 授课专用白板擦(1+2)套装</td>
        <td>颜色:黑色</td>
        <td>包装:12支/盒</td>
        <td>13</td>
        <td>1,000.00</td>
        <td>13,000.00</td>
      </tr>
    </table>

    <div class="box" id="box"></div>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/paging.min.js"></script>
<script src="js/dcalendar.picker.js"></script>

<script>
  var setTotalCount = 301;
  $('#box').paging({
    initPageNo: 3, // 初始页码
    totalPages: 30, //总页数
    totalCount: '', // 条目总数
    slideSpeed: 600, // 缓动速度。单位毫秒
    jump: true, //是否支持跳转
    callback: function (page) { // 回调函数
      console.log(page);
    }
  });

  var _date = new Date();

  $('#mydatepicker').dcalendarpicker({
    format: 'yyyy年MM月dd日',
    defaultDate: '1',
    changeYear: true

  });
  $('#mydatepicker2').dcalendarpicker({
    format: 'yyyy年MM月dd日',
    defaultDate: _date
  });
</script>
</body>
</html>